<template>
	<el-main>
		<el-row :gutter="20">
			<el-col :span="10" :offset="6">
				<el-form :model="form" :rules="rules" ref="form">
					<el-form-item label="请输入新密码" prop="password">
						<el-input type="password" v-model="form.password"></el-input>
					</el-form-item>
					<el-form-item label="再一次输入新密码" prop="passwordAgain">
						<el-input type="password" v-model="form.passwordAgain"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="changePassword('form')">
							修改密码
						</el-button>
						<el-button type="warning" native-type="reset">
							重置表单
						</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
	</el-main>
</template>

<script>
	import { removeAll } from '../../utils/permission.js'
	import { changePassword } from '@/api/mine.js'
	export default {
		data() {
			return {
				form: {},
				rules: {
					password: [
						{ required: true, message: '请输入新密码', trigger: ['blur', 'change'] }
					],
					passwordAgain: [
						{ required: true, message: '请重新输入新密码', trigger: ['blur', 'change'] }
					]
				}
			}
		},
		methods: {
			// 修改密码
			changePassword(form) {
				this.$refs[form].validate((valid) => {
					let _this = this;
					if (valid) {
						if (_this.form.password !== _this.form.passwordAgain) {
							_this.$message.error("两次密码不一致，请重新输入。");
							return false;
						} else {
							changePassword(_this.form).then(function(res){
								if (res.code === 200) {
									removeAll();
									_this.$message({
										message: res.msg,
										type: 'success'
									});
									_this.$router.push('/login');
								} else {
									_this.$message.error(res.msg);
								}
							})
						}
					}
				})
			}
		}
	}
</script>
